<%@include file="/WEB-INF/common/taglibs.jsp"%>
<link rel="STYLESHEET" type="text/css"
	href="${ctx}/resources/plugin/dhtmlxTree/dhtmlxtree.css">
<script src="${ctx}/resources/plugin/dhtmlxTree/dhtmlxcommon.js"></script>
<script src="${ctx}/resources/plugin/dhtmlxTree/dhtmlxtree.js"></script>
<script src="${ctx}/resources/plugin/dhtmlxTree/ext/dhtmlxtree_ed.js"></script>
<script src="${ctx}/resources/plugin/dhtmlxTree/ext/dhtmlxtree_kn.js"></script>
<script
	src="${ctx}/resources/plugin/dhtmlxTree/ext/dhtmlxtree_dragin.js"></script>
<script src="${ctx}/resources/plugin/dhtmlxTree/ext/dhtmlxtree_json.js"></script>
<script src="${ctx}/resources/plugin/dhtmlMenu/dhtmlxmenu.js"></script>
<script src="${ctx}/resources/plugin/dhtmlMenu/ext/dhtmlxmenu_ext.js"></script>
<script type="text/javascript" src="/ckfinder/ckfinder.js"></script>
<link rel="stylesheet" type="text/css"
	href="${ctx}/resources/plugin/dhtmlMenu/skins/dhtmlxmenu_dhx_skyblue.css">
<script type="text/javascript" src="${ctx}/resources/js/datatable-query.js"></script>
<script type="text/javascript"> 
function setFileField( fileUrl,data )
{		
	 data.selectActionData.val(fileUrl);
}


var tree
$(document).ready(function() {
 	$(".ck-server").click(function(){
 		var finder = new CKFinder();
 		finder.basePath = '${ctx}/ckfinder/';	// The path for the installation of CKFinder (default = "/ckfinder/").
 		finder.selectActionFunction = setFileField;
 		finder.selectActionData  = $(this);
 		finder.popup();

 	 });
	
	
	
	
	
	
	var drop_target ;
	var right_click;
	var cache_value;
	var menu1 = new dhtmlXMenuObject();
	tree = new dhtmlXTreeObject("treeboxbox_tree", "100%", "100%", 0);
	menu1.renderAsContextMenu();
	menu1.setIconsPath("${ctx}/resources/plugin/common/imgs/");
	menu1.addNewChild(menu1.topId, 0, "new", "New Category" , false, "opens.gif");
	menu1.addNewChild(menu1.topId, 1, "article", "Edit Content", false, "opens.gif");
	menu1.addNewChild(menu1.topId, 1, "post", "New Article", false, "opens.gif");
  	menu1.addNewChild(menu1.topId, 3, "edit-attr", "Quick Edit", false, "icon-edit-attritbue.png");
	menu1.addNewChild(menu1.topId, 4, "up", "Up", false, "up.gif");
	menu1.addNewChild(menu1.topId, 5, "down", "Down", false, "down.gif");
	menu1.addNewChild(menu1.topId, 6, "delete", "Delete", false, "delete.gif");
	menu1.addNewChild(menu1.topId, 7, "i18n", "I18N", false, "opens.gif");

	menu1.attachEvent("onClick", function(id, zoneId) {
		if ('up' === id){
			tree.moveItem(right_click,'up');
 		}else if ('down' === id){
			tree.moveItem(right_click,'down');
		}else if ('delete' === id){
			deleteMenu(right_click);		
   		}else if ('article'=== id){
		    openMenu(right_click);
   	   	}else if ('post'=== id){
		    editMenu(right_click);
   	   	}else if ('new' === id){
	   	   	newMenu(right_click);
   	    }else if ('edit-attr' === id){
   	    	editMenuAttr(right_click);
   	    } else if ('i18n' === id) {
			showLanguage(right_click);
		}
 	});
	tree.enableContextMenu(menu1);
 	tree.setSkin('dhx_skyblue');
	tree.setImagePath("${ctx}/resources/plugin/dhtmlxTree/imgs/csh_vista/");
	tree.enableDragAndDrop(1);
	tree.enableDragAndDrop(true);
	tree.enableItemEditor(true);
	tree.setDragHandler(tondrag);
	tree.enableKeyboardNavigation(true);
	tree.setDataMode("json");
	tree.attachEvent("onDrop", function(sId,tId,id,sObject,tObject){
		var childrens = tree.Fx(tId);
		
		var rank =new Array();
		$.each(childrens.split(','),function(index,value){
			
			if (tId == tree.getParentId(value)){
				rank.push(value);
	 		}
		});

		$.ajax({
			url : "${ctx}/admin/category/"+tId+"/rank/",
			type : "POST",
			data : {'rank' : rank},
			dataType : "json",
			success : function(data){		
				if(data && data.state && (data.state.indexOf("ERROR") != -1)){
					johnny.error(data.message);
					return;
				}else{
				johnny.info("update category name successfully");
				}
			}
		});	



	});
    tree.attachEvent("onRightClick", function(id, object){
   	right_click = id;
    });
	tree.attachEvent("onEdit", function(state,id,tree,value){
 	if (id<0){
		return value;
	}
	if (state ==0){
		cache_value = value;
 		return value;
	}
 	if (state==2 && value!=cache_value){
	$.ajax({
		url : "${ctx}/admin/category/"+id+"/edit/",
		type : "POST",
		data : {'name' : value},
		dataType : "json",
		success : function(data){		
			if(data && data.state && (data.state.indexOf("ERROR") != -1)){
				johnny.error(data.message);
				return;
			}else{
			johnny.info("update category name successfully");
			}
		}
	});
	
	}
	return value;
});
tree.loadJSON("${ctx}/admin/category-group/${categoryGroup.id}/tree/");
$('#confirmMenu').click(function(){

	var	parentId = 	$('#parentId').val();
 	if (parentId < 0){

		parentId = 0;
 	 }
	var index = tree.hasChildren(parentId)+1;
	$('#rankOrder').val(index);
	$.ajax({
		url : "${ctx}/admin/category/create/",
		type : "POST",
		data : $('#menuForm').serialize(),
		dataType : "json",
		success : function(data){		
			if(data && data.state && (data.state.indexOf("ERROR") != -1)){
				johnny.error(data.message);
				return;
			} else{
				tree.deleteItem(-1);
				var entity = data.entity;
				var pid = 0;
				if (entity.father){
					pid = entity.father.id;
				}
				tree.insertNewItem(pid,entity.id,entity.name,0,0,0,0,"SELECT,CALL");
				$("#newGroup").modal('hide');
				johnny.info("create new category successfully");
				}
		}
	});

});
function editMenu(id){
	var url = ""+"/admin/category-post/"+id+"/create/";
	 window.open(url, "", "scrollbars=no,toolbar=no,menubar=no,resizable=yes");
	
}


$('#confirmEdit').click(function(){
	var id = $("#edit-id").val();
	var url = "${ctx}/admin/category/"+id+"/edit/";
	var checked = ($('#edit-visible').attr('checked')=='checked');
 
	$.ajax({
		url : url,
		type : "POST",
		data : {'_method' :'PUT','name' :$('#edit-name').val(),'visible' : checked,'keyUrl' : $("#edit-KeyURL").val(),'coverURL': $("#cover-URL").val()},
		dataType : "json",
		success : function(data){		
			if(data && data.state && (data.state.indexOf("ERROR") != -1)){
				johnny.error(data.message);
				return;
			}else{
				$("#categoryDiv").modal('hide');
 				johnny.info("modify category successfully");
			}
		}
	});
	
});
 


});

function deleteMenu(id){
	var url = "${ctx}"+"/admin/category/"+id+"/delete/";
	$.ajax({
		url : url,
		type : "DELETE",
		dataType : "json",
		success : function(data){		
		if(data && data.state && (data.state.indexOf("ERROR") != -1)){
		johnny.success(data.message);
 			return;
		}else{
			tree.deleteItem(id,true);
	 		johnny.info("update category  successfully");
			}
		}
	});

	
} 

function openMenu(id){
	var url = "${ctx}/admin/category/"+id+"/article/";
    window.open(url, "", "scrollbars=no,toolbar=no,menubar=no,resizable=yes");
}
function editMenuAttr(id){
	var url = "${ctx}"+"/admin/category/"+id+"/edit/";
	$.ajax({
		url : url,
		type : "GET",
		dataType : "json",
		success : function(data){		
		if(data && data.state && (data.state.indexOf("ERROR") != -1)){

 		return;
		}else{
			var entity = data.entity;
			$("#categoryDiv").find("input[name=action]").val("/admin/category/"+id+"/edit/");
			$("#categoryDiv").find("div.modal-body").find(
			"input,select,textarea,checkbox").not(
			"[name=action],[type=hidden]").each(
			function(step, value) {

				var name = $(value).attr("name");

				if ($(value).is(':radio')) {
					console.dir(entity[name] + "  "
							+ $(value).val());

					if ("" + entity[name] === ""
							+ $(value).val()) {
						$(value).attr("checked", "checked");
					} else {
						$(value).removeAttr("checked");

					}
					$(value).uniform();

				} else {

					if (entity[name] || entity[name] === 0) {
						$(value).val(entity[name]);
						$(value).uniform();
					} else if (name.match(/Id$/)) {
						var pro = name.substring(0,
								name.length - 2);
						if (entity[pro] && entity[pro].id) {
							$(value).val(entity[pro].id);
							$(value).uniform();
						}

					} else {
						$(value).val("");
					}
				}});
			
			
			
			
			
			
			
			
			
			
			$("#categoryDiv").modal('show');
  			}
		}
	});
}
 
function newMenu(id){
 	$('#parentId').val(id);
  	$("#newGroup").modal('show');

}	
 

function tondrag(id, id2) {
 	var child = id;
	var parent = id2;
	
	var url = "${ctx}"+"/admin/category/"+id+"/edit/"+parent;
	$.ajax({
			url : url,
			type : "PUT",
			dataType : "json",
			success : function(data){		
			if(data && data.state && (data.state.indexOf("ERROR") != -1)){
			johnny.success(data.message);
	 		return;
			}else{
			johnny.info("update category  successfully");
 			}
			}
		});
		return true;
 };

</script>

<div class="row-fluid">
	<div class="span12">

				<div id="treeboxbox_tree" class="span4" ></div>
				<div id="drop_tree" class="span8  row-fluid">
					<div class="box gradient">
	 
		<div class="title">
				<h4>
				<span>Category </span> <span class="box-form right"> </span>
				
 				</h4>
 				<a href="#" class="minimize"> </a>
			</div>
		 <div class="content scrollable clearfix">
		<table class="table table-bordered table-vertical-centre categoryTable">
			<thead>
				<tr>
					<th><a class="select_all"><span class="icomoon-icon-checkmark-2"></span></a></th>
<th>Name </th>
<th>Title </th>
<th>CoverURL </th>
<th>Key Url </th>
<th>Active </th>
<th>Action</th>
				</tr>
			</thead>
		</table>
		</div>
</div>
				</div>
</div>
</div>

<script>
var recordColumn = ['','name','title','coverURL','keyUrl','active'];

$('.categoryTable').dataTable({
	"bLengthChange" : true,
	"aoColumnDefs" : [ {
		'bSortable' : false,
		'aTargets' : [0,3 ]
	} ],
	"sAjaxSource" : '${ctx}/admin/category/${categoryGroup.id}',
	"createQueryData" : function (aoData){
			return	johnny.initQueryData(aoData, recordColumn);
	},
	"createResult" : function (json, echo){
		var dataArray = new Array();
		for ( var i = 0; i < json.result.length; i++) {
			var subArray = new Array();
			var value = johnny.getForSelect(json.result[i].id);
			subArray.push(value);
subArray.push(json.result[i].name)
subArray.push(json.result[i].title)

subArray.push(johnny.getImageHtml(json.result[i].coverURL))
subArray.push(json.result[i].keyUrl)
subArray.push(json.result[i].active)
				var link = "${ctx}/admin/category/"+json.result[i].id+"/detail/";
				var conf = [{
				link : link,
				dataId : json.result[i].id,
				text : 'edit',
				css  : 'icomoon-icon-pencil'
			} 
			
			];
			subArray.push(johnny.getGridLink(conf)); 
				dataArray.push(subArray);
		}
		return {
			sEcho : echo,
			iTotalRecords : json.totalCount,
			iTotalDisplayRecords : json.totalCount,
			aaData : dataArray
		};
	}		
});




</script>

<div id="editMenu" class="modal hide fade" style="display: none;">
	<div class="modal-header">
		<button type="button" class="close" data-dismiss="modal">
			<span class="icon12 minia-icon-close"></span>
		</button>
		<h3>New category</h3>
	</div>
	<div class="modal-body">
		<form method="post" id="editForm">
			<input type="hidden" id="edit-id" value="">
			<div class="form-row row-fluid">
				<label class="form-label span4">Name</label> <input id="edit-name"
					class="span8" name="name" />
			</div>
			<div id="edit-link-div" class="form-row row-fluid">
				<label class="form-label span4">keyURL</label> <input
					id="edit-KeyURL" class="span8" name="keyURL" />
			</div>
			
			<div class="form-row row-fluid">
				<label class="form-label span4">cover URL</label> <input
					id="cover-URL" class="span8 ck-server" name="coverURL" />
			</div>
 
			<div class="form-row row-fluid">
				<label class="form-label span4">Visible</label> <input
					id="edit-visible" type="checkbox" name="visible" value="true"
					class="styled">
			</div>
		</form>
	</div>
	<div class="modal-footer">
		<a href="#" class="btn" data-dismiss="modal">Close</a> <a href="#"
			id="confirmEdit" class="btn btn-primary">Save changes</a>
	</div>
</div>




<div id="newGroup" class="modal hide fade" style="display: none;">
	<div class="modal-header">
		<button type="button" class="close" data-dismiss="modal">
			<span class="icon12 minia-icon-close"></span>
		</button>
		<h3>New category</h3>
	</div>
	<div class="modal-body">
		<form method="post" id="menuForm">
			<input type="hidden" name="categoryGroupId"
				value="${categoryGroup.id}"> <input id="parentId"
				type="hidden" name="parentId"> <input id="rankOrder"
				type="hidden" name="rankOrder">
			<div class="form-row row-fluid">
				<label class="form-label span4">Name</label> <input id="menu-name"
					class="span8" name="name" />
			</div>

			<div id="link-div" class="form-row row-fluid">
				<label class="form-label span4">Link</label> <input id="menu-link"
					class="span8 cke" name="keyUr" />
			</div>
			<div class="form-row row-fluid">
				<label class="form-label span4">Visable</label> <input id="visible"
					type="checkbox" name="visible" checked="checked" value="true"
					class="styled">
			</div>
		</form>
	</div>
	<div class="modal-footer">
		<a href="#" class="btn" data-dismiss="modal">Close</a> <a href="#"
			id="confirmMenu" class="btn btn-primary">Save changes</a>
	</div>
</div>
<div id="categoryDiv" class="modal hide fade" selector=".categoryTable"
	style="display: none;">
	<div class="modal-header">
		<button type="button" class="close" data-dismiss="modal">
			<span class="icon12 minia-icon-close"></span>
		</button>
		<h3>Category</h3>
	</div>

	<div class="modal-body">
		<input type="hidden" name="action">
		<!--name -->
		<div class="form-row row-fluid">
			<div class="span12">
				<div class="row-fluid">
					<label class="form-label span3" for="name">Name :</label><input
						class="span9" id="name" name="name" type="text" value="" />
				</div>
			</div>
		</div>
		<!--title -->
		<div class="form-row row-fluid">
			<div class="span12">
				<div class="row-fluid">
					<label class="form-label span3" for="title">Title :</label><input
						class="span9" id="title" name="title" type="text" value="" />
				</div>
			</div>
		</div>
		<!--coverURL -->
		<div class="form-row row-fluid">
			<div class="span12">
				<div class="row-fluid">
					<label class="form-label span3" for="coverURL">CoverURL :</label><input
						class="span9 ckfile" id="coverURL" name="coverURL" type="text"
						value="" />
				</div>
			</div>
		</div>
 
		<!--keyUrl -->
		<div class="form-row row-fluid">
			<div class="span12">
				<div class="row-fluid">
					<label class="form-label span3" for="keyUrl">Key Url :</label><input
						class="span9" id="keyUrl" name="keyUrl" type="text" value="" />
				</div>
			</div>
		</div>
		<!--newsPaper -->
		<div class="form-row row-fluid">
			<div class="span12">
				<div class="row-fluid">
					<label class="form-label span3" for="newsPaper">News Paper
						:</label><input class="span9" id="newsPaper" name="newsPaper" type="text"
						value="" />
				</div>
			</div>
		</div>
		<!--source -->
		<div class="form-row row-fluid">
			<div class="span12">
				<div class="row-fluid">
					<label class="form-label span3" for="source">Source :</label><input
						class="span9" id="source" name="source" type="text" value="" />
				</div>
			</div>
		</div>
		<!--copyRight -->
		<div class="form-row row-fluid">
			<div class="span12">
				<div class="row-fluid">
					<label class="form-label span3" for="copyRight">Copy Right
						:</label><input class="span9" id="copyRight" name="copyRight" type="text"
						value="" />
				</div>
			</div>
		</div>
		<!--active -->
		<div class="form-row row-fluid">
			<div class="span12">
				<div class="row-fluid">
					<label class="form-label span3" for="active">Active :</label>
					<div class="left marginT5 marginR10">
						<div class="radio" id="uniform-active1">
							<span><input type="radio" name="active" id="active1"
								value="true" checked="checked" style="opacity: 0;"></span>
						</div>
						True
					</div>
					<div class="left marginT5 marginR10">
						<div class="radio" id="uniform-active2">
							<span><input type="radio" name="active" id="active2"
								value="false" style="opacity: 0;"></span>
						</div>
						False
					</div>
				</div>
			</div>
		</div>
		<!--background -->
		<div class="form-row row-fluid">
			<div class="span12">
				<div class="row-fluid">
					<label class="form-label span3" for="background">Background
						:</label><input class="span9" id="background" name="background"
						type="text" value="" />
				</div>
			</div>
		</div>
		<!--linking -->
		<div class="form-row row-fluid">
			<div class="span12">
				<div class="row-fluid">
					<label class="form-label span3" for="linking">Linking :</label>
					<div class="left marginT5 marginR10">
						<div class="radio" id="uniform-linking1">
							<span><input type="radio" name="linking" id="linking1"
								value="true" style="opacity: 0;"></span>
						</div>
						True
					</div>
					<div class="left marginT5 marginR10">
						<div class="radio" id="uniform-linking2">
							<span><input type="radio" checked="checked" name="linking"
								id="linking2" value="false" style="opacity: 0;"></span>
						</div>
						False
					</div>
				</div>
			</div>
		</div>
		<!--attachmentUrl -->
		<div class="form-row row-fluid">
			<div class="span12">
				<div class="row-fluid">
					<label class="form-label span3" for="attachmentUrl">Attachment
						Url :</label><input class="span9 ckfile" id="attachmentUrl"
						name="attachmentUrl" type="text" value="" />
				</div>
			</div>
		</div>
		<!--online -->
		<div class="form-row row-fluid">
			<div class="span12">
				<div class="row-fluid">
					<label class="form-label span3" for="online">Online :</label>
					<div class="left marginT5 marginR10">
						<div class="radio" id="uniform-online1">
							<span class="checked"><input
								type="radio" name="online" id="online1" value="true" checked="checked"
								style="opacity: 0;"></span>
						</div>
						True
					</div>
					<div class="left marginT5 marginR10">
						<div class="radio" id="uniform-online2">
							<span  ><input
								type="radio"
								 
								name="online" id="online2" value="false" style="opacity: 0;"></span>
						</div>
						False
					</div>
				</div>
			</div>
		</div>
		<!--picURL -->
		<div class="form-row row-fluid">
			<div class="span12">
				<div class="row-fluid">
					<label class="form-label span3" for="picURL">PicURL :</label><input
						class="span9 ckfile" id="picURL" name="picURL" type="text"
						value="" />
				</div>
			</div>
		</div>
		<!--recommended -->
		<div class="form-row row-fluid">
			<div class="span12">
				<div class="row-fluid">
					<label class="form-label span3" for="recommended">Recommended
						:</label>
					<div class="left marginT5 marginR10">
						<div class="radio" id="uniform-recommended1">
							<span><input
								type="radio" name="recommended" id="recommended1" value="true"
								style="opacity: 0;"></span>
						</div>
						True
					</div>
					<div class="left marginT5 marginR10">
						<div class="radio" id="uniform-recommended2">
							<span class="checked"><input
								type="radio" 					checked="checked"
								name="recommended" id="recommended2" value="false"
								style="opacity: 0;"></span>
						</div>
						False
					</div>
				</div>
			</div>
		</div>
		<!--summary -->
		<div class="form-row row-fluid">
			<div class="span12">
				<div class="row-fluid">
					<label class="form-label span3" for="summary">Summary :</label>
					<textarea name="summary" class="span9 ckeditor" id="summary"
						rows="3" cols="5"><c:out value=""></c:out></textarea>
				</div>
			</div>
		</div>
	</div>
	<div class="modal-footer">
		<a href="#" class="btn" data-dismiss="modal">Close</a> <a href="#"
			class="btn btn-primary modal-submit">Save changes</a>
	</div>
</div>